<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/system/common/libs/webuploader/css/webuploader.image.css">
    <link rel="stylesheet" href="/system/common/libs/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/system/common/libs/bootstrap/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/system/common/custom/css/common.css">
    <script language="JavaScript" src="/system/common/libs/js/jquery.min.js"></script>
    <script language="JavaScript" src="/system/common/libs/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/frame/css/primary.css" class="css-href"/>

    <!--自定义控件css和js-->
    <script src="/system/common/libs/layer/layer.js"></script>
    <script type="text/javascript" src="/system/common/libs/laydate/laydate.js"></script>
    <script type="text/javascript" src="/system/common/libs/js/handlebars.js"></script>
    <script type="text/javascript" src="/system/common/custom/js/tab-operation.js"></script>
    <!--自定义控件css和js-->
    <link rel="stylesheet" href="/system/common/libs/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/system/common/widget/x_date/x_date.css">
    <link rel="stylesheet" href="/system/common/widget/x_list/x_list.css">
    <link rel="stylesheet" href="/system/common/widget/x_datagrid/x_datagrid.css">

    <script src="/system/common/libs/ztree/js/jquery.ztree.all.min.js"></script>
    <script src="/system/common/widget/x_win_tree/x_win_tree.js"></script>
    <script language="JavaScript" src="/system/common/custom/js/common.js"></script>
    <script src="/system/common/custom/js/jquery.cookie.js"></script>
    <!--以上内部不能动,以下为你自己的控件引入的内容-->
    <script src="/system/common/custom/js/hashmap.js"></script>
    <!--自定义控件css和js-->
    <script src="/system/common/libs/layer/layer.js"></script>
    <script src="/system/common/widget/x_win_tree/x_win_tree.js"></script>
    <script src="/system/common/custom/js/globalApi.js"></script>
    <script src="/system/common/custom/js/framedata.js"></script>
    <script src="/system/common/custom/js/frameEvent.js"></script>

    <script type="text/javascript" src="/system/common/libs/webuploader/js/webuploader.js"></script>
    <script type="text/javascript" src="/system/common/widget/x_upload/x_upload_img.js"></script>
    <script type="text/javascript" src="/system/common/widget/x_date/x_date.js"></script>
    <script type="text/javascript" src="/system/common/widget/x_list/x_list.js"></script>
    <script type="text/javascript" src="/system/common/widget/x_input/x_input.js"></script>
    <script type="text/javascript" src="/system/common/widget/x_datagrid/x_datagrid.js"></script>

    <link rel="stylesheet" href="/system/common/widget/x_fluid_layout/x_fluid_layout.css">



    <style>
        /*.user-info-legend {*/
            /*font-weight: 800;*/
            /*font-size: 14px;*/
        /*}*/

        /*.x_upload_img .thumbnail {*/
            /*padding: 0;*/
        /*}*/

        /*.x_upload_img p {*/
            /*line-height: normal;*/
            /*margin-top: 42px;*/
        /*}*/

        /*.x_upload_img .progress {*/
            /*margin-bottom: 0;*/
        /*}*/

        /*.x_upload_img .uploader-list {*/
            /*display: block;*/
        /*}*/
        body{
            background-color: #f1f4f5;
        }
        /*清楚浮动*/
        .c{
            zoom: 1;
        }

        .c::after {
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
            content: '.';
        }

        .information-left{
            width: 278px;
            height: 400px;
            background-color: #fff;
            float: left;
            position: relative;
        }
        .information-left-content{
            margin-left: 40px;
            font-size: 13px;
        }
        .information-left-content p{
            margin-bottom: 12px;
        }
        .information-left-content p span{
            color: #333;
        }
        .information-left-img{
            height: 130px;
            width: 130px;
            border-radius:100%;
            margin: 50px auto 35px;
        }
        .information-left-img img{
            border-radius:50%;
            overflow: hidden;
        }
        .information-left-footer{
            background-color: #f6f9fd;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 0;
            height: 77px;
        }
        .information-left-footer div{
            text-align: center;
            width: 86px;
            display: inline-block;
        }
        .information-left-footer div h4{
            color: #333;
        }
        .information-right{
            width: calc(100% - 298px);
            min-height: 260px;
            background-color: #fff;
            float: right;
            padding: 20px;
        }
        .information-tab{
            border-bottom: 1px solid #e4eaec;
            font-size: 13px;
        }
        .information-tab ul{
            padding:0;
            margin: 0;
        }
        .information-tab ul li{
            float: left;
            list-style: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        .information-tab ul li i{
            margin-right: 10px;
        }
        .information-tab ul li:hover{
            border-bottom: 2px solid #ccd5db;
        }
        .information-tab-content{
            min-height:180px;
            width: 100%;
            overflow: auto;
        }
        .information-tab-content .tab-content{
            display: none;
        }
        .information-tab-content .active{
            display: block;
        }
        .stat-count {
            cursor: pointer;
        }
    </style>

</head>


<body style="padding: 0">
<div class="information-left">
    <div class="information-left-header">
        <div class="information-left-img">
            <img id="pic" src="../../img/user_icon.png" height="130" width="130"/>
        </div>
        <div class="information-left-content">
            <p>名称：<span id="userName"></span></p>
            <p>部门：<span id="orgJoinName"></span></p>
            <p>上次登录：<span id="lastLoginTime"></span></p>
        </div>
        </div>
    <div class="information-left-footer">
        <div class="stat-count">
            <h4 id="taskCount">0</h4>
            <span>任务</span>
        </div>
        <div class="stat-count">
            <h4 id="msgCount">0</h4>
            <span>消息</span>
        </div>
        <div class="stat-count">
            <h4 id="logCount">0</h4>
            <span>日志</span>
        </div>
    </div>
</div>
<div class="information-right">
    <div class="information-tab">
        <ul class="c">
            <li tab-id="tab-info" class="information-active">
                <div><i class="fa fa-magic"></i>个人信息</div>
            </li>
            <li tab-id="tab-password">
                <div><i class="fa fa-key"></i>密码修改</div>
            </li>
            <li tab-id="tab-log">
                <div><i class="fa fa-file-text"></i>日志</div>
            </li>
        </ul>
    </div>
    <div class="information-tab-content">
        <div id="tab-info" class="tab-content active">
            <iframe src="/system/page/show.do?pageId=sysUserDetail&module=user" frameborder="0" style="width: 100%; height: 600px;"></iframe>
        </div>
        <div id="tab-password" class="tab-content">
            <iframe src="/frame/index/subpage/reset.html" frameborder="0" height="300px" width="100%"></iframe>
        </div>
        <div id="tab-log" class="tab-content">
            <table xtype="datagrid" xid="5056091625706" xname="datagrid" pId="0"
                   data-property='{"pagination":true,"width":"","title":"","float":"initial","rows":10,"xname":"datagrid","singleSelect":true,"height":""}'
                   class="table table-striped table-hover table-bordered table-condensed draggable" style="float:initial;"
                   data-options="{url:'/system/common/dataList.do?source=sysLogListMy&returnDataType=2',optBar:false,initLoad:true,method:'post',priv:'0001',pagination:true,rows:10,title:'',singleSelect:true,edit:false,rowNum:true,rowCheck:true,width:'800px',height:'400px'}">
                <thead>
                <tr>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"lid","url":""}},"field":"lid","hidden":true,"readonly":false,"width":"auto","require":false,"title":"编号","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"uid","url":""}},"field":"uid","hidden":false,"readonly":false,"width":"auto","require":false,"title":"用户id","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"module","url":""}},"field":"module","hidden":false,"readonly":false,"width":"auto","require":false,"title":"模块功能","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"time","url":""}},"field":"time","hidden":false,"readonly":false,"width":"auto","require":false,"title":"操作时间","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"ip","url":""}},"field":"ip","hidden":false,"readonly":false,"width":"auto","require":false,"title":"ip","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"content","url":""}},"field":"content","hidden":false,"readonly":false,"width":"auto","require":false,"title":"操作内容","align":"left"}'></th>
                    <th data-verify='{}'
                        data-options='{"editor":{"type":"x_input","params":{"data":"","name":"memo","url":""}},"field":"memo","hidden":false,"readonly":false,"width":"auto","require":false,"title":"备注","align":"left"}'></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
</body>

<script>
    $(function () {
        /**
         * 从首页打开时接受参数然后打开相应tab
         * @type {string}
         */
        var openType=GlobalApi.getParamFromLocation("type");
        if(openType=="link-log"){
            activeTab($('.information-tab ul li[tab-id="tab-log"]'));
        }else if(openType=="link-pwd"){
            activeTab($('.information-tab ul li[tab-id="tab-password"]'));
        }

        $('.information-tab ul li').on('click', function() {
            activeTab(this);
        });

        $('.stat-count').on('click', function() {
            if ($(this).children('h4').attr('id') == 'logCount') {
                activeTab($('.information-tab ul li[tab-id="tab-log"]'));
            } else if ($(this).children('h4').attr('id') == 'msgCount') {
                tabOperation.openTabLabel({
                    url: "/system/page/show.do?pageId=sysMessageListMy&module=",
                    name: "我的消息",
                    id: "myMessage"
                });
            } else if ($(this).children('h4').attr('id') == 'taskCount') {
                tabOperation.openTabLabel({
                    url: "/bpm/auto-test/taskCenter.html",
                    name: "任务中心",
                    id: "taskCenter"
                });
            }
        });

        $.ajax({
            url: "/system/user/userInfo.do",
            success: function(data) {
                if (data) {
                    if (!data["pic"] || data["pic"] == "") {
                        data["pic"] = "../../img/user_icon.png";
                    }
                    $("#pic").attr("src", data["pic"]);
                    $.each(data, function(key, value) {
                        if (key != "pic") {
                            $("#" + key).html(value);
                        }
                    });
                }
            }
        });

        $.ajax({
            url: "/bpm/task/getusertaskinfo.do",
            success: function (data) {
                if (data && data.status == "1" && data.data) {
                    // 待办任务数
                    $("#taskCount").html(data.data.unfinishedTaskN);
                }
            }
        });
    });

    function activeTab(tab) {
        $('.information-tab ul li').not(tab).removeClass('information-active');
        $(tab).addClass('information-active');
        $('.information-tab-content .tab-content').removeClass('active');
        $('.information-tab-content .tab-content[id="'+$(tab).attr('tab-id')+'"]').addClass('active');
    }

</script>
</html>